<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div, ul, li {
            margin: 0;
            padding: 0
        }

        li {
            float: left;
            width: 100px;
            height: 24px;
            line-height: 24px;
            list-style: none;
            border: solid 1px;
            text-align: center;
        }

        #cart {
            width: 700px;
            text-align: center;
        }

        .num input {
            width: 30px;
            text-align: center;
        }

        ul {
            background-color: cornflowerblue;

        }

        /*ul:nth-child(0) {*/
        /*background-color: aqua;*/
        /*}*/

        .num {
            width: 150px;
        }

        #total {
            clear: both;
            text-align: right;
            padding-right: 50px;
            padding-top: 5px;
        }

        #total span {
            color: red
        }
    </style>
    <script src="js/jquery3.7.1.js"></script>
    <script>
        let products = [
            {product: "电脑", price: 10000},
            {product: "u盘", price: 23},
            {product: "充电器", price: 45},
            {product: "鼠标", price: 65}];
        $(function () {

            let template = $(`<ul>
                <li><input name="one" type="checkbox"></li>
                <li>手机</li>
                <li>1000</li>
                <li class="num"><input type="button" value="-"> <input name="productCount" type="text" value="1"> <input
                        type="button" value="+">
                </li>
                <li>1000</li>
                <li><span>删除</span></li>
            </ul>`)



            // //克隆模板
            // let template = $('#cart').children().eq(1).clone(true);
            // //移除模板
            // $('#cart').children().eq(1).remove();


            $("input[name='add']").click(function () {
                let newNode = template.clone(true);
                //随机选择商品
                let index = Math.floor(Math.random()*4)
                /**
                 * 替换商品信息
                 * 如果没有该商品则添加 ，否则修改商品数量
                 */
                let isExist = false //是否存在
                let ulArray = $("#cart").children("ul")//获得所有ul数组
                //遍历数组，查找是否存在该商品
                for (let i = 1; i < ulArray.length; i++) {
                    //如果商品存在则修改数量，isExist = true
                    let ul = $(ulArray[i]); /** 获得节点是js对象，需要转换成jquery对象*/
                    if(ul.children().eq(1).text() === products[index].product){
                        ul.children().eq(3).children().eq(1).val(Number.parseInt(ul.children().eq(3).children().eq(1).val())+1)
                        //计算一下合计值？
                        ul.children().eq(4).html(products[index].price * Number.parseInt(ul.children().eq(3).children().eq(1).val()))
                        isExist = true
                        break
                    }
                }
                //如果不存在，添加该商品
                if(!isExist){
                    newNode.children().eq(1).html(products[index].product)
                    newNode.children().eq(2).html(products[index].price)
                    newNode.children().eq(4).html(products[index].price)
                    $("#total").before(newNode);  //添加新节点
                }
            });
            //全选
            $("input[name='all']").click(function (){
                $("input[name='one']").prop("checked",$("input[name='all']").prop("checked"))
            })

            //删除操作
            $("#cart").on("click","span",function (){
                $(this).closest("ul").remove();
            });

            //增加数量操作
            $("#cart").on("click","input[value='+']",function (){
                $(this).prev().val(Number.parseInt($(this).prev().val())+1);
                calcPrice(this)
            });

            //较少数量操作
            $("#cart").on("click","input[value='-']",function (){
                //num == 1 需要提示是否删除，确定则删除。
                $(this).next().val(Number.parseInt($(this).next().val())-1);
                calcPrice(this)
            });

            //直接修改
            $("#cart").on("blur","input[name='productCount']",function (){
                //num == 1 需要提示是否删除，确定则删除。
                if(Number.parseInt($(this).val()) <= 0){
                    alert('不能小于0');
                    return
                }
                calcPrice(this)
            });
        })


        let calcPrice = (is) =>{
            let li = $(is).parent()
            li.next().html(Number.parseInt(li.prev().html()) * Number.parseInt(li.children().eq(1).val()))
            //计算总价
        }

    </script>

</head>
<body>
<div id="cart">
    <ul>
        <li><input name="all" type="checkbox">全选</li>
        <li>产品名称</li>
        <li>价格</li>
        <li class="num">数量</li>
        <li>合计</li>
        <li>操作</li>
    </ul>
    <!--view-->

    <div id="total">总价:<span>1000</span></div>
    <input name="add" type="button" value="添加">
</div>
</body>
</html>
